<template>
  <el-container v-loading="pageLoading"
                element-loading-text="加载信息中..."
                element-loading-spinner="el-icon-loading"
                style="height: 100%">
    <el-main class="mainCard">
      <el-row style="height: auto">
      <el-card shadow="hover" style="height: 100%">
        <div class="baseInfo">
          <el-row :gutter="20">
            <el-col :span="12" style="text-align: left;font-size: 2.5rem;font-weight: bolder">
              {{ jobInfo.label }}
            </el-col>
            <el-col :span="12" style="text-align: right;padding-top: 0.8rem;font-size: 1.5rem;">
              {{ jobInfo.salary }}
            </el-col>
          </el-row>

          <i v-for="label in jobInfo.skill_label">
            <el-tag class="tag" size="mini">{{ label }}</el-tag>
          </i>
        </div>

        <el-row class="detail block">
          <h4 class="littleTitle">工作地址</h4>
          <h5 style="">工作地区:{{ jobInfo.city }}-{{ jobInfo.district }}</h5>
        </el-row>
        <el-row class="detail block">
          <h4 class="littleTitle">职位信息</h4>
          <p v-html="jobInfo.detail.replace(/([：；：。])/g, '$1<br>')"></p>
        </el-row>
        <!--        <p>{{ jobInfo }}</p>-->
      </el-card>
      </el-row>
    </el-main>
    <el-main class="rightCard">
      <el-row style="height: auto;font-size: 0.8rem">
        <el-card shadow="hover" class="companyCard" style="height: 100%" >
        <el-avatar shape="square" :size="80" :src="jobInfo.company.logo"></el-avatar>
        <el-row class="lineText">
          <i class="el-icon-s-shop"></i>{{ jobInfo.company.name }}
        </el-row>
        <el-row class="lineText">
          <i class="el-icon-s-operation"></i>
          {{ jobInfo.company.type }}
        </el-row>
        <el-row class="lineText">
          <i class="el-icon-user-solid"></i>
          {{ jobInfo.company.size }}
        </el-row>
        <el-row class="lineText" style="border-top: 0.1rem solid rgba(141, 141, 141, 0.26);padding-top: 1rem">
          <el-button round @click="getCompanyDetailInfo">查看公司详细信息</el-button>
        </el-row>
        <el-row class="companyDetail"></el-row>
      </el-card></el-row>
      <el-row  style="height: auto">
      <el-card shadow="hover" class="recommendCard" style="height: 90%">
        <el-row style="border-top: 0.01rem solid rgba(141, 141, 141, 0.26);padding-top: 1rem;margin-top: 1rem">
          感兴趣的职位
        </el-row>
        <template>
          <el-table
              :data="recommendData"
              style="width: 100%"
              :show-header="false"
              :row-class-name="tableRowClassName"
          >

            <el-table-column
                prop="label"
                label="信息"
                >
              <template slot-scope="scope">
                <div style="text-align: center;"
                     @click="$router.push({'name':'JobDetail',params:{'jobId':scope.row.id}})">
                  <span>{{ scope.row.label }} - {{ scope.row.city }}</span>
                  <div>{{ scope.row.salary }}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-card></el-row>
    </el-main>
  </el-container>
</template>

<script>
import {getJobDetail} from "@/API/api";

export default {
  name: "JobDetail",
  data() {
    return {
      jobInfo: {
        "id": null,
        "skill_label": [],
        "salary": null,
        "district": null,
        "work_exp": null,
        "work_type": null,
        "city": null,
        "education": null,
        "min_salary": 0,
        "max_salary": 0,
        "position": null,
        "company": {
          "id": null,
          "size": null,
          "type": null,
          "search_id": null,
          "company_code": null,
          "name": "",
          "logo": null,
          "detail": "",
          "create_time": null
        },
        "search_id": null,
        "label": "",
        "detail": "",
        "publish_time": null,
        "create_time": null,
        "top_city": null
      },
      recommendData: [],
      pageLoading: false
    }
  },
  methods: {
    getCompanyDetailInfo() {
      window.location.href = `https://www.zhaopin.com/companydetail/${this.jobInfo.company.company_code}.htm`;
    },
    getRecommendJobList() {

    },
    tableRowClassName({row, rowIndex}) {
      if (row.min_salary > this.jobInfo.min_salary) {
        return 'warning-row';
      } else if (row.max_salary > this.jobInfo.max_salary) {
        return 'success-row';
      }
      return '';
    },
    initLoad() {
      this.pageLoading = true
      let jobId = this.$route.params.jobId
      this.$api.getJobDetail({'id': jobId}).then(rep => {
        this.jobInfo = rep.data

      }).finally(() => {
        setTimeout(() => {
          this.pageLoading = false
        }, 200)
      })
      this.$api.recommend().then(rep => {
        this.recommendData = rep.data
      })
    }
  },
  watch: {
    '$route': {
      immediate: true,
      handler(newVal, oldValue) {
        this.initLoad()
      }
    }
  },
  beforeMount() {
    this.initLoad()
  },
  mounted() {
  },

}
</script>

<style lang="less">
.mainCard {
  width: 70vw;
  height: 100%
}

.rightCard {
  width: 20vw;
  height: 100%;
  text-align: center;
}

.detail {
  padding-top: 5%;
  width: 50%;
}


.baseInfo {
  padding-bottom: 1%;
  height: 100%;
  width: 100%;
  border-bottom: 0.1rem solid rgba(141, 141, 141, 0.26);
}

.tag {
  margin-right: 1vw;
  font-size: 0.1rem;
}

.littleTitle {
  padding-left: 1rem;
  margin-bottom: 1rem;
  border-left: 0.25rem solid #ff4400;
}

.separate {
  margin-bottom: 1rem;
  border-top: 0.1rem solid rgba(141, 141, 141, 0.26);
}

.block {
  padding-top: 2rem;

}

.salary {
  justify-content: right;
  text-align: right;
}

.companyCard .lineText {
  margin-bottom: 0.5rem;
}

.companyCard {
  height: 50%;
}

.recommendCard {
  margin-top: 10%;
  height: auto;
  width: 100%;
  max-height: 100%;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>